<!--  -->
<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区 -->
    <el-card>
      <el-row :gutter="20"> 
        <el-col :span="5">
          <Menu @tree-node-click="treeNodeClick"></Menu>
        </el-col>
        <el-col :span="15">
          <div ref="box" style='width:800px;height:550px'></div>
        </el-col>
      </el-row>
      
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import Menu from '../product/components/Menu'
export default {
  
  name:"Statistical",
  data () {
    return {
      name:'',
      selectCatId :9,
      productList:[],
      dataName:[],
      dataSales:[]
    };
  },
  computed:{
    monitor(){
      return  this.name
    }
  },
  components:{
    Menu
  },
  watch:{
    name:function(){
      this.getProductList()
     
    }
  },
  created(){
    this.getProductList()
  },
  methods: {
    // 子组件树被点击传回来数据 node节点
    treeNodeClick(data,node,component){
      // console.log(data,node,component)
      this.selectCatId = data.catId
      this.name = data.name
    },
    async getProductList() {
      console.log(this.selectCatId)
      const { data: res } = await this.$http.get(
        `/dqxmall/prosysproinfo/getAllShopByCatalogId?catalogId=${this.selectCatId}`
      );
      this.dataName=[]
      this.dataSales=[]
      console.log(res)
      res.page.list.forEach((item) => {
        // if (item.publishStatus) {
         this.dataName.push(item.proName) 
         var sales = 0
         item.skus.forEach(item1 =>{
           sales  += item1.saleCount
         })
         this.dataSales.push(sales)
        
      });
      // console.log("dataname",this.dataName)
      // console.log("datasales",this.dataSales)
       this.getMyChart()
    },
    getName(labelName){
      this.name = labelName
       console.log(this.name)
    },
    getMyChart(){
      // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(this.$refs.box)
    myChart.setOption({
        title: {
          text: `${this.name}销售数量`
        },
        tooltip: {},
        xAxis: {
          data: this.dataName
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: this.dataSales
          }
        ]
      });
    }
  },
}

</script>
<style lang='less' scoped>

</style>